<template>
  <div class="wik-table-header-column-menu">
    <div class="wik-table-header-column-menu-wrap" v-for="(item, index) in menu" :key="'_menu_' + index">
      <div
        class="wik-table-header-column-menu-wrap-content"
        :class="{ hidden: subItem.disabled }"
        v-for="(subItem, subIndex) in item"
        :key="'_sub_menu_' + subIndex"
        @click="() => subItem.onClick()"
      >
        {{ typeof subItem.title === "function" ? subItem.title(column) : subItem.title }}
      </div>
      <div v-if="index != menu.length - 1" class="line"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useSort } from "@table/hooks/useSort";
import { TableColumn } from "../../interface";
import { useColumn } from "../../hooks/useColumn";
const { sortHandler } = useSort();
const emits = defineEmits(["close"]);
type Props = {
  column: TableColumn;
};

const props = defineProps<Props>();
const { key } = props.column;
const { isLeftMove, isRightMove, moveLeft, moveRight, removeColumn, isFreezeColumn, freezeColumn } = useColumn();

const freezeTitleRender = (column: TableColumn) => {
  return column.isFixed ? "取消冻结" : "冻结此列";
};

const menu = ref([
  [
    {
      icon: "icon-sort-ascending",
      title: "以此排序",
      disabled: !props.column?.isShowSort,
      onClick: () => {
        sortHandler(props.column);
        emits("close");
      }
    }
  ],
  [
    {
      icon: "icon-sort-ascending",
      title: "向左移动",
      disabled: isLeftMove(key),
      onClick: () => {
        moveLeft(key);
        emits("close");
      }
    },
    {
      icon: "icon-sort-descending",
      title: "向右移动",
      disabled: isRightMove(key),
      onClick: () => {
        moveRight(key);
        emits("close");
      }
    }
    // {
    //   icon: "icon-sort-descending",
    //   title: "左侧插入列",
    //   disabled: false,
    //   onClick: () => {}
    // },
    // {
    //   icon: "icon-sort-descending",
    //   title: "右侧插入列",
    //   disabled: false,
    //   onClick: () => {}
    // }
  ],
  [
    {
      icon: "icon-sort-ascending",
      title: freezeTitleRender,
      disabled: isFreezeColumn(key),
      onClick: () => {
        freezeColumn(key);
        emits("close");
      }
    },
    {
      icon: "icon-sort-descending",
      title: "移除此列",
      disabled: false,
      onClick: () => {
        removeColumn(key);
        emits("close");
      }
    }
  ]
]);
</script>
<style lang="scss">
.wik-table-header-column-menu {
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  width: 240px;
  padding: 12px 0;
  background: #ffffff;
  border-radius: 0.25rem;
  box-shadow: 0 0 16px #00000014;
  &-wrap-content {
    display: flex;
    align-items: center;
    height: 22px;
    padding: 6px 20px;
    font-size: 14px;
    line-height: 22px;
    color: #333333;
    cursor: pointer;
    &:hover {
      background: #f5f5f5;
    }
  }
  .hidden {
    pointer-events: none;
    cursor: not-allowed !important;
    opacity: 0.5;
    &:hover {
      background: #ffffff;
    }
  }
  .line {
    width: 100%;
    height: 1px;
    margin: 4px 0;
    background: #eeeeee;
  }
}
</style>
